<template>
	<van-pull-refresh v-model="isLoading" @refresh="onRefresh" :disabled="refDisabled">
	<div class="content" ref="pageInfo">
		<div class="userInfo flex1">
			<div class="userInfo-top">
				<div class="userInfo-top-name">{{info.doctor_name}} <span class="ml12">{{info.staff_profession}}</span></div>
				<div>{{info.dept_name}}门诊-{{info.doctor_name}}</div>
				<div class="userInfo-top-time" v-if='ListData.length>0'>{{ListData[0].date||''}}</div>
			</div>
			<div class="userInfo-price" @click="toPagesLink('','')">
				挂号金额
				<div class="userInfo-price-num">{{info.price||0}}元</div>
			</div>
		</div>
		<div class="list flexwarp">
			<div class="list-item flex3" :class="v.number<=0?'bgGre':''" @click="toPagesLink('/registerShow',v)" v-for="(v,i) in info.span_list" :key='i'>
				<div>
					<div class="list-item-time">{{v.span||''}}</div>
					<div>预约号码{{v.ser_num}}</div>
				</div>
			</div>
		</div>
		<back-img></back-img>
		
	</div>
	</van-pull-refresh>
</template>

<script>
	export default {
		data() {
			return {
				isLoading: false,
				scrollTop:0,
				refDisabled:false,
				ListData:[],
				info:{},
				dept_id:'',
				time:'',
				doctor_id:'',
				userList:[],
				userInfo:{}
			};
		},
		mounted(){ 
			let box = this.$refs.pageInfo;
			box.addEventListener('scroll',()=>{
				this.scrollTop = box.scrollTop;
			});
		},
		watch: {
			scrollTop(val){
				if(val==0){
					this.refDisabled=false
				}else{
					this.refDisabled=true
				}
			}
		},
		created() {
			if (this.$route.query.dept_id) {
				this.dept_id = this.$route.query.dept_id
				this.time=this.$route.query.time
				this.doctor_id=this.$route.query.doctor_id
				this.getList()
			}
			// this.petList()
		},
		components: {

		},
		methods: {
			onRefresh() {
				this.getList()
				setTimeout(() => {
					this.isLoading = false;
				}, 500);
			},
			petList() {
				let that=this
				let url = "/api/pat/list";
				this.$axios.get(url).then(res => {
					that.userList = res.pat_info
					var user={}
					if(that.userList.length>0){
						that.userList.forEach((item, index) => {
							if(item.is_self){
								user=item
							}
						})
					}
					if(!user.id&&that.userList.length>0){
						user=that.userList[0]
					}
					that.userInfo=user
				})
				.catch(err => {
					console.log("err", err);
				});
			},
			getList(text) {
				let url = "/api/his/registerArrange4Day";
				this.$axios.post(url,{
					dept_id:this.dept_id,
					doctor_id:this.doctor_id||'',
					date:this.time||''
				}).then(res => {
					this.ListData = res.date_arrange
					this.info=this.ListData[0].rgst_arrange[0]
				})
				.catch(err => {});
			},
			toPagesLink(url,v){
				console.log(v,'jaja')
				if(v.number<=0){//没号了
					return this.$toast('该时间段暂无号源！');
				}
				var data={
					name:'山西天慈医院',
					room:this.info.dept_name+'-'+this.info.doctor_name,
					doctor:this.info.staff_profession||"",
					doctorName:this.info.doctor_name,
					time:this.ListData[0].date+this.info.time_slot+v.span,
					money:this.info.price+'元',
				}
				this.$store.commit("updateNumInfo",data)
				this.$router.push({
					path:url,
					query:{
						pid:'',
						rgst_date:this.ListData[0].date, 
						rgst_arr_no:this.info.rgst_arr_no, 
						span:v.span,
						type:'jiuzhen',
						ser_num:v.ser_num
					},
				})
			}
		}
	};
</script>

<style lang="less" scoped>
	.content{
		height: 100vh;
		background-color:#f0f8f8;
		padding: 11px 18px;
		overflow-y: scroll;
		.list{
			&-item{
				width: 48%;
				height: 70px;
				background: #FFFFFF;
				border-radius: 8px;
				margin-bottom: 10px;
				font-size: 15px;
				font-family: PingFang;
				font-weight: 500;
				color: #333333;
				text-align: center;
				&-time{
					margin-bottom: 13px;
				}
			}
			.bgGre{
				background: #f8f8f8;
			}
		}
		.userInfo{
			padding: 12px 13px;
			background: #FFFFFF;
			border-radius: 10px;
			margin-bottom: 16px;
			&-top{
				font-size: 13px;
				font-family: PingFang;
				font-weight: 500;
				color: #333333;
				&-time{
					font-size: 11px;
					font-family: PingFang;
					font-weight: 500;
					color: #666666;
					margin-top: 9px;
				}
				&-name{
					font-size: 17px;
					font-family: MiSans;
					font-weight: 600;
					color: #333333;
					margin-bottom: 9px;
				}
			}
			&-price{
				text-align: center;
				font-size: 11px;
				font-family: PingFang;
				font-weight: 500;
				color: #666666;
				&-num{
					font-size: 16px;
					font-family: PingFang;
					font-weight: 500;
					color: #e60113;
					margin-top: 10px;
				}
			}
		}
	}
</style>